window.addEventListener("load", function() {
    var imgAllWidth = $(".imgAll").width();
    var index = 0;
    var timer = null;
    // console.log(imgAllWidth);
    $(".dot li").click(function() {
        index = $(this).index();
        console.log(imgAllWidth * index);
        $(this).addClass("active").siblings().removeClass("active");
        $(".imgAll").animate({
            left: -imgAllWidth * index
        }, 500)
    })

    //鼠标移入
    $(".slideshow").mouseenter(function() {
        clearInterval(timer);
    })

    //鼠标移出
    $(".slideshow").mouseleave(function() {
        timers()
    })

    //点击next下一页
    $(".next").click(function() {
        if ($(".imgAll").is(":animated")) return false;
        index++
        move()
    })


    //点击next上一页
    $(".prev").click(function() {
        if ($(".imgAll").is(":animated")) return false;
        index--
        move()
    })


    function timers() {
        clearInterval(timer);
        timer = setInterval(() => {

            index++;
            move()
        }, 2000);
    }
    timers()


    function move() {
        if (index >= $(".list img").length) {
            index = 0
            $(".imgAll").css({ left: 0 });
            index++
        }

        if (index < 0) {
            index = $(".dot li").length
            $(".imgAll").css({ left: -imgAllWidth * index });
            index--
        }

        var activeIndex = index >= $(".dot li").length ? 0 : index;
        $(".dot li").eq(activeIndex).addClass("active").siblings().removeClass("active");
        $(".imgAll").animate({ left: -imgAllWidth * index }, 500)
    }
})